<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#container {
				margin: 20px;
			}

			#container table {
				width: 100%;
				border: 1px solid green;
				border-collapse: collapse;
			}

			#container table td,
			#container table th {
				border: 1px solid grey;
				text-align: center;
				height: 40px;
			}

			#container table td {
				font-size: 14px;
			}

			#container table tr:nth-child(odd) {
				background-color: rgba(255,255,255,0.7);
			}

			#container table tr:nth-child(even) {

				background-color: rgba(255,255,100,0.7);
			}

			#container table tbody tr:hover {
				background-color: aqua;
			}

			#container a {
				text-decoration: none;
				margin-right: 10px;
			}

			#container span {
				padding: 5px;
				background-color: lavender;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox">
						</th>
						<th>编号</th>
						<th>类别</th>
						<th>价格</th>
						<th>说明</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="ids" value="1">
						</td>
						<td>1</td>
						<td>早餐</td>
						<td>7</td>
						<td>7个卤蛋</td>
						<td>
							<a href="">删除</a>
							<a href="">修改</a>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6">
							<button>批量删除</button>
						</td>
					</tr>
					<tr>
						<td colspan="6">
							<span>1</span><span>2</span><span>3</span><span>4</span>...<span>15</span>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>
</html>
